<template>
  <div class="page-container-padding">
    <!-- 模块 -->
    <div class="module-box">
      <vab-icon :icon="['fas', 'book']" class="icon"></vab-icon>
      <span class="module-name">投资计划</span>
    </div>
    <!-- 申请表单 -->
    <div style="width: 500px">
      <el-form
        ref="ApplyForm"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="投资品种" prop="variety">
          <el-input
            v-model="formData.variety"
            placeholder="请输入拟投资的品种"
          ></el-input>
        </el-form-item>
        <el-form-item prop="fund" label="投资资金">
          <el-input
            v-model="formData.fund"
            placeholder="请输入拟投资的资金，单位：元"
          ></el-input>
        </el-form-item>
        <el-form-item prop="useTo" label="使用对象">
          <el-input
            v-model="formData.useTo"
            placeholder="请输入投资计划使用的对象"
          ></el-input>
        </el-form-item>
        <el-form-item label="投资周期" prop="cycle">
          <el-input
            v-model="formData.cycle"
            placeholder="请输入计划的投资周期"
          ></el-input>
        </el-form-item>
        <el-form-item label="风险承受" prop="risk">
          <el-input
            v-model="formData.risk"
            placeholder="请输入风险承受"
          ></el-input>
        </el-form-item>
        <el-form-item label="完成时间" prop="finishTime">
          <el-date-picker
            v-model="formData.finishTime"
            type="datetime"
            placeholder="选择期望完成的时间"
            align="right"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="linkMsg">
          <el-input
            v-model="formData.linkMsg"
            placeholder="请输入您的联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="实物交割" prop="delivery">
          <el-input
            v-model="formData.delivery"
            placeholder="实物交割描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="其他要求" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            placeholder="其他的要求等"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button>取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="toSubmit">
          确定提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { CreateMyInvestment } from '@/api/prodService/investment'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        submitLoading: false,
        formData: {
          variety: '',
          fund: '',
          useTo: '',
          cycle: '',
          risk: '',
          finishTime: new Date(),
          linkMsg: '',
          delivery: '',
          content: '',
        },
        formRules: {
          variety: [
            { required: true, message: '请输入投资的品种', trigger: 'change' },
          ],
          fund: [
            { required: true, message: '请输入投资资金', trigger: 'change' },
          ],
          useTo: [
            { required: true, message: '请输入使用对象', trigger: 'change' },
          ],
          cycle: [
            { required: true, message: '请输入投资周期', trigger: 'change' },
          ],
          risk: [
            { required: true, message: '请输入风险承受', trigger: 'change' },
          ],
          finishTime: [
            { required: true, message: '请选择完成时间', trigger: 'change' },
          ],
          linkMsg: [
            {
              required: true,
              message: '请选择输入联系方式',
              trigger: 'change',
            },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      toSubmit() {
        this.$refs.ApplyForm.validate((validate) => {
          if (!validate) {
            return
          }
          const formdata = {
            variety: this.formData.variety,
            fund: this.formData.fund,
            use_to: this.formData.useTo,
            cycle: this.formData.cycle,
            risk: this.formData.risk,
            finish_time: datetimeToStr(this.formData.finishTime, false, '-'),
            link_msg: this.formData.linkMsg,
            delivery: this.formData.delivery,
            content: this.formData.content,
          }
          this.submitLoading = true

          CreateMyInvestment(formdata)
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.$refs.ApplyForm.resetFields()
              this.submitLoading = false
            })
            .catch((err) => {
              this.submitLoading = false
            })
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-box {
    padding: 4px 6px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px 5px 0 0;
    margin-bottom: 16px;
    .icon {
      color: #fd5516;
    }
    .module-name {
      margin-left: 10px;
    }
  }
</style>
